<template>
    <div class="main_Box">
        <div class="top_tab">
            <div @click="goBack" class="top_flex_back">
                <img src="../../../assets/image/zxl/fanhui.png" style="width: 8px;height: 12px;margin-right: 4px;">
                <span>返回</span>
            </div>
            <div>
                <el-pagination ref="paginationRef" layout="prev, jumper, next" :page-size="1" :total="totalPages"
                    v-model:current-page="currentPage" @current-change="handleCurrentChange" />
            </div>
            <div class="top_entry">
                <button v-if="contractInfo.cancelContractId" style="margin-right: 16px;" @click.stop="lookOld">查看原合同</button>
                <button  @click="upSign">签署</button>
            </div>
        </div>
        <div class="bottom_tab">
            <div class="left_box">
                <div class="left_area">
                    <div class="area_name">拖动签署位置</div>
                    <div class="area_drag">
                        <div v-if="user_type == 1" style="width: 142px;height: 48px;margin-bottom: 21px;"
                            draggable="true" @dragstart="handleDragStart($event, 'name1')">
                            <img style="width: 100%;height: 100%;" :src="name1Img">
                        </div>
                        <div v-if="user_type == 2" style="width: 142px;height: 142px;margin-bottom: 21px;"
                            draggable="true" @dragstart="handleDragStart($event, 'name2')">
                            <img style="width: 100%;height: 100%;" :src="name2Img">
                        </div>
                        <div style="width: 140px;height: 40px;" draggable="true"
                            @dragstart="handleDragStart($event, 'date')">
                            <img style="width: 100%;height: 100%;" :src="dateImg">
                        </div>
                    </div>
                </div>
                <div class="left_area">
                    <div class="area_name">签署说明</div>
                    <div class="area_tip">
                        <div>(1)可点击签署提示中待签署页跳转</div>
                        <div>(2)将印章拖动到指定区域内</div>
                        <div>(3)可点击下方按钮选择一键落章签署</div>
                        <div>(4)若有两章重合无法正确拖放也可选择一键落章签署</div>
                        <div>(5)点击印章可删除重新盖章</div>
                    </div>
                </div>
                <div class="left_area">
                    <div class="area_name">一键落章</div>
                    <div class="area_sign_box">
                        <div class="area_sign" @click="stamping">
                            <img src="../../../assets/image/zxl/gaizhang.png" class="area_sign_icon">
                            <span>{{ allImgsFilled ? '一键取消' : '一键落章' }}</span>
                        </div>
                    </div>
                </div>
                <div class="left_area">
                    <div class="area_name">签署提示</div>
                    <div class="area_prompt">
                        <el-steps direction="vertical">
                            <el-step v-for="(item, index) in signTipArr" :key="index">
                                <template #description>
                                    <div class="main_prompt" v-html="item"></div>
                                </template>
                                <template #icon>
                                    <img src="../../../assets/image/zxl/progress_icon.png"
                                        style="width: 12px;height: 12px;">
                                </template>
                            </el-step>
                        </el-steps>
                    </div>
                </div>
            </div>
            <div class="middle_box" ref="docWrapperRef">
                <!-- 模拟文档内容 -->
                <div ref="pageWrapperRef" @scroll="handleScroll" class="scroll-container">
                    <div v-if="totalPagesImg.length != 0" class="page-container" ref="pageRefs"
                        v-for="page in totalPages" :key="page">
                        <!-- 每页的文档图片（模拟多页） -->
                        <img :src="totalPagesImg[page - 1].filePath" alt="第{{ page }}页文档" class="document-img">

                        <div v-for="item in placedAreas.filter(a => a.page === page)" :key="item.ids" :style="{
                            left: `${item.abscissa_x}px`,
                            top: `${item.ordinate_y}px`,
                            width: getAreaSize(item.type).width,
                            height: getAreaSize(item.type).height
                        }" class="placed-area" :class="`type-${item.type}`"
                            @dragover.prevent="handleDragOver($event, item)" @drop="handleDrop($event, item)">
                            <div class="area-label">
                                <img v-if="item.type == 'name1'" style="width: 100%;height: 100%;"
                                    :src="item.img ? item.img : sigbBg2"></img>
                                <img v-if="item.type == 'name2'" style="width: 100%;height: 100%;"
                                    :src="item.img ? item.img : sigbBg1"></img>
                                <img v-if="item.type == 'date'" style="width: 100%;height: 100%;"
                                    :src="item.img ? item.img : sigbBg3"></img>
                                <img v-if="item.type == 'place' && item.img && !sealShow"
                                    style="width: 100%;height: 100%;" :src="item.img ? item.img : sigbBg4"></img>
                            </div>
                        </div>
                        <div class="seal_show_box" v-if="sealShow">
                            <div v-for="item in processedData" :key="item.ids" :style="{ top: `${item.ordinate_y}px` }"
                                class="seal_show_item" @dragover.prevent="handleDragOver($event, item)"
                                @drop="handleDrop($event, item)">
                                <span v-if="!item.img">骑缝章</span>
                                <img :src="item.img" v-if="item.img" style="width: 100%;height: 100%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_box">
                <div class="seal_box" v-if="user_type == 2 && totalPages > 1">
                    <div class="seal_btn" @click="sealShow = !sealShow">{{ !sealShow ? '盖骑缝章' : '收骑缝章' }}</div>
                </div>

                <div class="right_data_box">
                    <div class="right_item">
                        <div class="right_name">任务主题</div>
                        <div class="right_value1">{{ contractInfo.task_name }}</div>
                    </div>
                    <div class="right_item">
                        <div class="right_name">合同编号</div>
                        <div class="right_value1">{{ contractInfo.file ? contractInfo.file.ContractNo : '' }}</div>
                    </div>
                    <div class="right_item">
                        <div class="right_name">发起方</div>
                        <div class="right_value1">{{ contractInfo.start_user_name }}</div>
                    </div>
                    <div class="right_item">
                        <div class="right_name">发起时间</div>
                        <div class="right_value1">{{ contractInfo.CreateTime }}</div>
                    </div>
                    <div class="right_item">
                        <div class="right_name">截止时间</div>
                        <div class="right_value1">{{ contractInfo.closing_date }}</div>
                    </div>
                    <div class="right_item">
                        <div class="right_name">签署详情</div>
                        <div class="right_value2">
                            <div class="right_value2_item" v-for="(item, index) in contractInfo.allJoins">
                                <span>{{ item.join_name }}</span>：<span>{{ item.join_phone }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="right_item">
                        <div class="right_name">签署进度</div>
                        <div class="right_value3">
                            <el-steps direction="vertical">
                                <el-step v-for="(item, index) in contractInfo.contract" :title="item.create_time"
                                    :description="item.content">
                                    <template #icon>
                                        <img src="../../../assets/image/zxl/progress_icon.png"
                                            style="width: 12px;height: 12px;">
                                    </template>
                                </el-step>
                            </el-steps>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed } from "vue";
import { useRouter, useRoute } from 'vue-router';
import type { ElMessage, ElMessageBox } from 'element-plus'
import { getSignContractDetail, signContractDraft } from "@/api/xl";
import sigbBg1 from '../../../assets/image/zxl/sign_bg1.png'
import sigbBg2 from '../../../assets/image/zxl/sign_bg2.png'
import sigbBg3 from '../../../assets/image/zxl/sign_bg3.png'
import sigbBg4 from '../../../assets/image/zxl/sign_bg4.png'

const router = useRouter();
const route = useRoute();
const props = defineProps({
    contract_id: {
        type: String,
        default: '' // 对象/数组默认值需返回函数
    },
    user_id: {
        type: Number,
        default: 0 // 对象/数组默认值需返回函数
    },
    user_type: {
        type: Number,
        default: 0 // 对象/数组默认值需返回函数
    },
})

//测试区域
onMounted(async () => {
    await nextTick(); // 等待DOM渲染完成

    getContractInfo()

    const date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    currentDate.value = `${year}-${month}-${day}`;
});

const totalPages = ref(1);// 总页数
const totalPagesImg = ref([]);// 总页数
const pageWrapperRef = ref(null);// 滚动容器
const docWrapperRef = ref(null);
const currentDate = ref('');
const pageRefs = ref([]);//所有页的DOM引用
const paginationRef = ref(null);
const processedData = ref([]);
// 页面尺寸与滚动状态
const pageHeight = ref(0); // 单页高度
const currentPage = ref(1); // 当前显示的页码
const targetPage = ref(1); // 页码输入框绑定的值
// 当前拖拽的签署区域类型
const draggingType = ref(null);
const currentDraggedPage = ref(1); // 记录拖拽时所在的页码
const rightFileImg = ref('');
const sealShow = ref(false)
const name1Img = ref('')
const name2Img = ref('')
const dateImg = ref('')
const contractInfo = ref({}); //
// 签署区域数据（仅记录页内坐标，不记录绝对位置）
const placedAreas = ref([]);
const signTipArr = ref([]);

const rightArr = ref({
    contract_no: '20251009083532686',
    sign_progress: [{
        time: '2025-10-10 04:55',
        content: '由耀朔科技(上海)有限公司已拒签'
    }, {
        time: '2025-10-08 04:55',
        content: '由耀朔科技(上海)有限公司已拒签'
    }, {
        time: '2025-10-05 04:55',
        content: '由耀朔科技(上海)有限公司已拒签'
    }]
});

const upSign = () => {
    if (allImgsFilled.value) {
        console.log('所有签名/图片区域都已填写');
        signContractDraft({
            task_id: props.contract_id,
            user_id: props.user_id,
            join_type: props.user_type,
        }).then(res => {
            console.log(res)
            if (res.code == 1) {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                router.push({ path: '/SigningCenter' })
            } else {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "error",
                });
                // router.push({ path: '/SigningCenter' })
            }
        });
    } else {
        console.log('存在未填写的签署区域');
        ElMessage({
            message: '存在未填写的签署区域',
            grouping: true,
            type: "error",
        });
        return
    }
}

const getContractInfo = () => {
    getSignContractDetail({
        task_id: props.contract_id,
        user_id: props.user_id,
    }).then(res => {
        console.log(res)
        //设置页码
        contractInfo.value = res.data;
        if (props.user_type == 1) {
            name1Img.value = res.data.seal
        } else if (props.user_type == 2) {
            name2Img.value = res.data.seal
        }
        dateImg.value = res.data.daySeal
        placedAreas.value = res.data.signarea;
        processedData.value = Array.from(
            // 先筛选出type为seal的数据，再根据id去重
            new Map(
                placedAreas.value
                    .filter(item => item.type === 'place')
                    .map(item => [item.ids, item])
            ).values()
        ).map(({ page, singer, ...rest }) => rest);
        tipData()//签署提示数组处理
        totalPages.value = res.data.file.imgCount;
        totalPagesImg.value = res.data.file.images;
        rightFileImg.value = res.data.file.images[0].filePath;
        const classifier = paginationRef.value.$el.querySelector('.el-pagination__classifier')
        if (classifier) {
            classifier.textContent = '/ ' + totalPages.value  // 改为你需要的文字
        }
        setTimeout(() => {
            if (pageRefs.value.length) {
                // 获取单页高度（用于计算页码和位置）
                pageHeight.value = pageRefs.value[0].offsetHeight;
            }
        }, 1000)
        //签署方
        signArr.value = res.data.joins;
    });
}

const goBack = () => {
    //router.push({ name: 'employeeList' });
    router.back()
}

const lookOld = () => {
    router.push({ name: "SigningCenterDetail", params: { id: contractInfo.value.cancelContractId, type: 3, userId: props.user_id, usertype: 1 } });
}

const wrapNumbersWithBlue = (str) => {
    // 正则匹配所有数字，用<span class="blue_prompt">包裹
    return str.replace(/(\d+)/g, '<span class="blue_prompt">$1</span>');
}

const tipData = () => {
    // 1. 分离place类型和其他类型
    const { placeType, otherTypes } = placedAreas.value.reduce(
        (acc, item) => {
            if (item.type === "place") {
                acc.placeType.push(item);
            } else {
                acc.otherTypes.push(item);
            }
            return acc;
        },
        { placeType: [], otherTypes: [] }
    );
    // 2. place类型按ids去重
    const uniquePlaceIds = new Set(placeType.map(item => item.ids));
    const placeCount = uniquePlaceIds.size;

    // 3. 其他类型按page统计数量（过滤0的场景提前处理）
    const pageCountMap = otherTypes.reduce((acc, item) => {
        const page = item.page;
        acc[page] = (acc[page] || 0) + 1;
        return acc;
    }, {});

    // 4. 生成结果数组（仅保留有签署区域的页码）
    const result = [];

    // 按页码排序并过滤0的项
    Object.entries(pageCountMap)
        .sort(([pageA], [pageB]) => pageA - pageB)
        .forEach(([page, count]) => {
            if (count > 0) { // 只展示有签署区域的页码
                result.push(wrapNumbersWithBlue(`您的合同的第${page}页有${count}处待签署区域`));
            }
        });

    // 添加骑缝信息（即使为0也展示，因为骑缝是独立概念）
    result.push(wrapNumbersWithBlue(`您的合同有${placeCount}处骑缝`));

    signTipArr.value = result;

    console.log(signTipArr.value)
}

const handleScroll = () => {
    if (!pageWrapperRef.value || !pageHeight.value) return;

    const scrollTop = pageWrapperRef.value.scrollTop;
    // 计算当前页：滚动距离 / 单页高度 → 向下取整 + 1
    currentPage.value = Math.floor(scrollTop / pageHeight.value) + 1;
    currentPage.value = Math.max(1, Math.min(currentPage.value, totalPages.value));
    targetPage.value = currentPage.value;
}

// 拖拽进入页面时：实时更新当前所在页码（关键）
const handleDragEnter = (page) => {
    currentDraggedPage.value = page; // 无论是否滚动，只要拖拽进入某页就记录
};

const handleDragOver = (e, item) => {
    if (item.type == 'place' && draggingType.value == 'name2') {
        e.dataTransfer.dropEffect = 'copy';
    } else {
        // 只有类型匹配时才允许放置
        if (draggingType.value === item.type) {
            e.dataTransfer.dropEffect = 'copy'; // 显示复制图标
        } else {
            e.dataTransfer.dropEffect = 'none'; // 不允许放置
        }
    }
};

// 拖拽经过覆盖层
const handleOverlayDragOver = (e, item) => {
    // 只有类型匹配时才允许放置（如signature图标只能拖入signature区域）
    if (draggingType.value === item.type) {
        e.dataTransfer.dropEffect = 'copy'; // 显示可放置图标
        e.currentTarget.classList.add('dragging-over'); // 添加拖拽反馈样式
    } else {
        e.dataTransfer.dropEffect = 'none'; // 不允许放置
        e.currentTarget.classList.remove('dragging-over');
    }
};

const handleCurrentChange = (page) => {
    const validPage = Math.max(1, Math.min(page, totalPages.value));
    targetPage.value = validPage;
    currentPage.value = validPage;
    if (pageWrapperRef.value && pageHeight.value) {
        pageWrapperRef.value.scrollTo({
            top: (validPage - 1) * pageHeight.value,
            behavior: 'smooth'
        });
    }
}


// 开始拖拽：记录类型和基础数据
const handleDragStart = (e, type) => {
    draggingType.value = type;
    // 存储拖拽类型（用于匹配）
    e.dataTransfer.setData('text/plain', type);
};

// 放置元素：坐标完全跟随鼠标位置（限制在容器内）
const handleDrop = (e, page) => {
    console.log(page)
    e.preventDefault();
    const draggedType = e.dataTransfer.getData('text/plain');
    if (page.type == 'place' && draggedType == 'name2') {
        const imageMap = {
            name2: name2Img.value,
            place: name2Img.value,
            name1: name1Img.value,
            date: dateImg.value
        };

        // 更新数据中的图片路径（实现吸附效果）
        placedAreas.value = placedAreas.value.map(sig =>
            sig.ids === page.ids ? { ...sig, img: imageMap[draggedType] } : sig
        );

        processedData.value = processedData.value.map(sig =>
            sig.ids === page.ids ? { ...sig, img: imageMap[draggedType] } : sig
        );
    } else {
        // 类型匹配时才吸附图片
        if (draggedType === page.type) {
            // 根据类型设置对应图片（实际项目中替换为真实图片路径）
            const imageMap = {
                name2: name2Img.value,
                place: name2Img.value,
                name1: name1Img.value,
                date: dateImg.value
            };

            // 更新数据中的图片路径（实现吸附效果）
            placedAreas.value = placedAreas.value.map(sig =>
                sig.ids === page.ids ? { ...sig, img: imageMap[draggedType] } : sig
            );

            processedData.value = processedData.value.map(sig =>
                sig.ids === page.ids ? { ...sig, img: imageMap[draggedType] } : sig
            );
        }
    }

    draggingType.value = null;

};

// 放置图标到覆盖层（吸附效果）
const handleOverlayDrop = (e, item) => {
    e.preventDefault();
    const draggedType = e.dataTransfer.getData('text/plain');

    // 移除拖拽反馈样式
    e.currentTarget.classList.remove('dragging-over');

    // 类型匹配时才吸附图标
    if (draggedType === item.type) {
        // 根据类型设置对应图标（实际项目替换为真实路径）
        const iconMap = {
            place: 'https://pic.rmb.bdstatic.com/bjh/down/d0ab73b28e28a4d4861f3dbf280333a3.png'
        };

        // 更新数据，实现图标填充
        processedData.value = processedData.value.map(area =>
            area.id === item.id ? { ...area, img: iconMap[draggedType] } : area
        );
    }

    draggingType.value = null;
};

// 签署区域尺寸配置
const getAreaSize = (type) => {
    const sizes = {
        name1: { width: '142px', height: '48px' },
        name2: { width: '142px', height: '142px' },
        date: { width: '140px', height: '40px' },
        place: { width: '142px', height: '142px' }
    };
    return sizes[type];
};

const allImgsFilled = computed(() => {
    // 检查每一项的img是否都不是空字符串
    return placedAreas.value.every(item => item.img !== null);
});

//一键落章
const stamping = () => {
    if (allImgsFilled.value) {
        console.log('所有签名/图片区域都已填写');
        placedAreas.value.forEach(item => {
            item.img = null;
        });
        processedData.value.forEach(item => {
            item.img = null;
        });
    } else {
        console.log('存在未填写的签名/图片区域');
        placedAreas.value.forEach(item => {
            if (item.type === 'date') {
                item.img = dateImg.value;
            } else if (item.type === 'name1') {
                item.img = name1Img.value;
            } else if (item.type === 'name2') {
                item.img = name2Img.value;
            } else if (item.type === 'place') {
                item.img = name2Img.value;
            }
            // 可以根据需要添加其他类型的处理逻辑
        });

        processedData.value.forEach(item => {
            item.img = name2Img.value;
        });
    }
}

const signIndex = ref(0)
const signArr = ref([]);

onBeforeUnmount(() => {

});

</script>
<style scoped>
::v-deep .el-step__description {
    padding-right: 0px !important;
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 24px;
}

::v-deep .el-step__title {
    padding-right: 0px !important;
    font-size: 14px !important;
    color: #333 !important;
    font-weight: inherit !important;
}

::v-deep .el-step__line {
    width: 1px !important;
}

::v-deep .el-pagination__jump {
    margin-left: 0 !important;
}

::v-deep .el-pagination__goto {
    display: none;
}

::v-deep .el-pagination .el-input__inner {
    font-size: 14px !important;
}

::v-deep .el-input__wrapper {
    padding: 0 !important;
}

::v-deep .blue_prompt {
    color: #01509f !important;
}

.scroll-container {
    height: 100%;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    position: relative;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.drop-target {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    /* 使内部元素可绝对定位 */
    overflow: hidden;
    min-height: 600px;
}

/* 单页容器样式 */
.page-container {
    width: 100%;
    display: flex;
    overflow-x: hidden;
    justify-content: center;
    position: relative;
    /* 相邻页之间添加分隔线 */
    border-bottom: 1px solid #e0e0e0;

    .seal_show_box {
        width: 178px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        background-image: url('../../../assets/image/zxl/qifeng.png');
        background-size: 178px 178px;
        background-repeat: repeat-y;
        border: 1px dashed #3887e1;
        box-sizing: border-box;

        .seal_show_item {
            position: absolute;
            left: 0px;
            width: 176px;
            height: 176px;
            border-top: 1px dashed #3887e1;
            border-bottom: 1px dashed #3887e1;
            background-color: #f5f5f5;
            text-align: center;
            line-height: 176px;
            writing-mode: vertical-rl;
            letter-spacing: 12px;
            cursor: pointer;
        }
    }
}

/* 文档图片样式 */
.document-img {
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.mock-document {
    padding: 40px;
    line-height: 2;
    color: #333;
    border-bottom: 1px solid #eee;
}

.doc-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 40px 0;
}

.doc-content {
    margin: 15px 0;
    font-size: 16px;
}

.placed-area {
    position: absolute;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
    box-sizing: border-box;
}

.placed-area:hover {
    /* box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.5); */
}

.type-name1 {
    /* background-color: rgba(24, 144, 255, 0.05); */
}

.type-name2 {
    /* background-color: rgba(24, 144, 255, 0.05); */
}

.type-date {
    /* background-color: rgba(24, 144, 255, 0.05); */
}

.type-place {
    /* background-color: rgba(24, 144, 255, 0.05); */
    /* border-radius: 50%; */
}

.area-label {
    /* border: 2px dashed #1890ff; */
    /* border-bottom: 0px dashed #1890ff; */
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 100%;
}

.area-label1 {
    background-color: #3887e1;
    /* border-bottom: 0px dashed #1890ff; */
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 1px;
}

.signer-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    font-size: 12px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
}

/* 删除按钮 */
.delete-btn {
    position: absolute;
    top: -16px;
    right: -8px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background-color: #ff4d4f;
    color: white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.delete-btn1 {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background-color: #ff4d4f;
    color: white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.delete-btn:hover {
    background-color: #f5222d;
}

.main_Box {
    overflow-y: scroll;
    height: 100%;

    &::-webkit-scrollbar {
        display: none;
    }
}

.top_tab {
    width: 100%;
    height: 56px;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-radius: 12px;
    justify-content: space-between;

    .top_flex_back {
        font-size: 16px;
        color: #333;
        cursor: pointer;
        margin-left: 18px;
        /* flex: 1; */
    }
}

.top_entry {
    margin-right: 29px;

    button {
        background-color: #01509f;
        color: #fff;
        width: 108px;
        height: 36px;
        border: 0px solid #eaeaea;
        font-size: 16px;
        border-radius: 6px;
        cursor: pointer;
    }

    button:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
}

.bottom_tab {
    margin-top: 22px;
    width: 100%;
    height: calc(100% - 78px);
    display: flex;
    justify-content: space-between;

    .right_box::-webkit-scrollbar {
        display: none;
    }

    .right_box {
        height: 100%;
        display: flex;

        .seal_box {
            margin-right: 4px;
            box-sizing: border-box;
            padding-top: 50vh;

            .seal_btn {
                writing-mode: vertical-rl;
                color: #fff;
                background-color: #ff4d4f;
                padding: 16px 8px;
                border-radius: 6px;
                letter-spacing: 6px;
                cursor: pointer;
            }
        }

        .right_data_box {
            background-color: #fff;
            padding: 16px;
            border-radius: 12px;
            overflow-y: scroll;
            width: 246px;
            height: 100%;
            box-sizing: border-box;
        }

        .right_data_box::-webkit-scrollbar {
            display: none;
        }

        .right_item {
            margin-bottom: 25px;

            .right_name {
                font-size: 14px;
                color: #999;
                margin-bottom: 10px;
            }

            .right_value1 {
                font-size: 16px;
                color: #333;
            }

            .right_value2 {
                font-size: 16px;
                color: #333;

                .right_value2_item {
                    margin-bottom: 10px;
                }
            }
        }
    }

    .middle_box {
        width: 756px;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
    }

    .left_box::-webkit-scrollbar {
        display: none;
    }

    .left_box {
        width: 246px;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 12px;
        padding: 16px;
        overflow-y: scroll;

        .left_area {
            margin-bottom: 32px;

            .area_name {
                color: #01509f;
                font-size: 18px;
                font-weight: bolder;
                margin-bottom: 5px;
            }

            .area_tip {
                font-size: 14px;
                color: #666;

                div {
                    margin-bottom: 4px;
                }
            }

            .area_prompt {
                margin-top: 24px;

                .main_prompt {
                    font-size: 14px;
                    color: #666;

                }
            }

            .area_sign_box {
                width: 100%;
                margin-top: 24px;
                display: flex;
                align-items: center;
                justify-content: center;

                .area_sign {
                    width: 168px;
                    height: 46px;
                    border-radius: 23px;
                    cursor: pointer;
                    border: 1px solid #ff4345;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    color: #ff4345;

                    .area_sign_icon {
                        width: 22px;
                        height: 22px;
                        margin-right: 6px;
                    }
                }
            }

            .area_drag {
                display: flex;
                flex-direction: column;
                margin-top: 24px;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
            }
        }
    }
}
</style>